<template>
	<view class="login-box">
		<view class="wxlogin-main" :style="{height:height+'px'}">
			<view class="wxlogin-main_content">
				<image src="../../static/login.jpg" mode="widthFix"></image>
			</view>
			<view class="wxlogin-main_foot">
				<!-- #ifdef MP-WEIXIN -->
				<view class="wxlogin-main_foot_content">
					<uv-button :disabled="!isAgrement" shape="circle" type="primary" open-type="getPhoneNumber"
						@getphonenumber="loginwx">手机号一键登录</uv-button>
					<uv-gap height="10px" />
					<uv-button shape="circle" type="primary" hairline :plain="true" @click="toOther">其他手机号登录</uv-button>

				</view>
				<view class="wxlogin-main_check">
					<view class="check-left"><uv-checkbox-group shape="circle">
							<uv-checkbox :customStyle="{marginBottom: '8px'}" name="checked" @change="changeBox">
								<template v-slot:default>
									<text style="color: #909399;">已阅读并同意</text>
								</template>
							</uv-checkbox>
						</uv-checkbox-group>
					</view>
					<view class="check-right">
						<text style="color: #3c9cff;" @click="tourl('/pages/auth/privacyagreement')">《隐私政策》</text>
						<text style="color: #3c9cff;" @click="tourl('/pages/auth/vipprivacy')">《会员服务协议》</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<uv-image :src="wxmpicon" width="300rpx" height="300rpx"></uv-image>
					<view>微信扫码登录</view>
					<!-- #endif -->


				</view>

			</view>

		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import { wxmplogin, getUnlimitedQRCode } from '@/utils/http.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				height: 0,
				fromcode: '',
				isAgrement: false,
				wxmpicon: '',
				loginform: {
					code: '',
					code2: '',
					fromcode: ''
				},
			}
		},
		onReady() {
			let systemInfo = uni.getSystemInfoSync()
			this.height = systemInfo.windowHeight - 40
		},
		onLoad(option) {
			// #ifdef H5
			var env_version = process.env.NODE_ENV == 'development' ? 'develop' : 'release'
			var scene = "fromtype=H5"
			let parm = { page: 'pages/auth/login', scene: scene, env_version: env_version, check_path: false }
			getUnlimitedQRCode(parm).then(res => {
				this.wxmpicon = 'data:image/png;base64,' + res.data
			})
			// #endif
			if (this.token) {
				uni.switchTab({ url: '/pages/index/index' })
			} else {

			}
			if (option.scene) {
				//小程序码邀请
				var scene = decodeURIComponent(option.scene)
				let parms = scene.split("&")
				parms.forEach(arr => {
					const [k, v] = arr.split("=")
					this.loginform[k] = v
				})
			}
			uni.setNavigationBarColor({
				backgroundColor: '#3c9cff',
				frontColor: '#ffffff'
			})
			if (option.inviteCode) {
				this.loginform.fromcode = option.inviteCode
				this.$store.commit('setting/setInviteCode', )
			}

		},
		onShow() {
			let that = this
			wx.login({
				success(res) {
					that.loginform.code2 = res.code
				}
			})
		},
		computed: {
			...mapState({
				invitecode: state => state.setting.inviteCode,
				token: state => state.user.token
			})
		},
		methods: {
			changeBox(e) {
				this.isAgrement = e
			},
			tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			loginwx(e) {
				if (!this.isAgrement) {
					uni.showToast({
						title: '请阅读并勾选协议',
						icon: 'error'
					})
					return
				}
				let self = this
				const { code, encryptedData, iv } = e

				if (code) {
					//获取 
					self.loginform.code = code
					wxmplogin(self.loginform).then(res => {
						if (res.code == 200) {

							this.$store.dispatch('user/userLogin', res.data)
							this.$store.dispatch('user/initUserData')
							this.$store.dispatch('socket/openSocket')
							uni.showToast({ title: '登录成功' })
							if (res.data.imgsrc.indexOf('sysimg') > -1) {
								uni.showModal({
									title: '温馨提醒',
									content: '是否更换头像',
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/mine/changeinfo'
											})
										} else {

											uni.switchTab({ url: '/pages/index/index' })
										}
									}
								})
							} else {
								uni.switchTab({ url: '/pages/index/index' })

							}
						}
					})

				} else {
					//拒绝
					uni.showToast({ title: '登录失败' })
				}
			},
			toOther() {
				uni.navigateTo({ url: '/pages/auth/otherlogin' })
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss">
	.login-box {
		background-color: #3c9cff;
		padding: 20px;
		overflow: hidden;
		background: linear-gradient(#3d9eff, #3dc1ff);
	}

	.wxlogin-main {
		position: relative;
		flex-direction: column;
		background: #fff;
		border-radius: 30upx;

		&_content {
			image {
				width: 100%;
			}
		}

		&_foot {
			position: absolute;
			bottom: 20px;
			width: 100%;
			flex-direction: row;
			justify-content: center;

			&_content {
				padding: 10px;
			}

		}

		&_check {
			padding: 10px;
			display: flex;
			flex-direction: row;
			font-size: 13px;

			.check-box {
				.info {
					color: #909399;
				}

				.privacy {
					color: #3c9cff;
				}
			}
		}
	}
	.login-box .uv-button--active:before {
		opacity: 0 !important;
	}
	.login-box .uv-button--active{
		background: #3c9cff !important;
		color: #fff !important;
	}
</style>